<template>
  <el-dialog class="order" width="60%" title="订单详情" :visible.sync="showDia" @close="handleClose">
    <div class="card">
      <h3 class="title">发货信息</h3>
      <div>订单号: {{order.no}}</div>
      <div>下单时间: {{order.created_at}}</div>
      <div>订单状态: {{mapFlag(order.flag)}}</div>
    </div>

    <div class="card">
      <h3 class="title">买家信息</h3>
      <el-row :span="20" v-if="order.address">
        <el-col :span="8">
          <span>用户: {{order.user.nickname}}</span>
        </el-col>
        <el-col :span="8">
          <span>电话: {{order.user.phone}}</span>
        </el-col>
      </el-row>
    </div>

    <div class="card">
      <h3 class="title">收货信息</h3>

      <el-row :span="20" v-if="order.address">
        <el-col :span="8">
          <span>联系人: {{order.address.contact_name}}</span>
        </el-col>
        <el-col :span="8">
          <span>联系电话: {{order.address.contact_phone}}</span>
        </el-col>
        <el-col :span="8">
          <span>详细地址: {{order.address.address}}</span>
        </el-col>
      </el-row>
      <el-row :span="20" v-else>
        <el-col :span="8">
          <span>联系人:</span>
        </el-col>
        <el-col :span="8">
          <span>联系电话:</span>
        </el-col>
        <el-col :span="8">
          <span>详细地址:</span>
        </el-col>
      </el-row>
      <div>买家留言: {{order.remark}}</div>
    </div>

    <div class="card" v-if="(order.flag >= 7)">
      <h3 class="title">发货信息</h3>
      <div v-html="showShipData"></div>
    </div>

    <div class="card">
      <h3 class="title">商品信息</h3>
      <el-table :data="order.items" stripe style="width: 100%">
        <el-table-column label="商品描述" width="200">
          <template slot-scope="scope">
            <div style="flex-direction: row;align-items: center;">
              <img
                :src="scope.row.snapshot.cover"
                style="width:40px;height:40px;vertical-align: middle; margin-right:10px;"
              >
              <span>{{ scope.row.snapshot.title }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="auto">
          <template slot-scope="scope">
            <span>{{ scope.row.snapshot.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <span>{{ scope.row.snapshot.price}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="数量">
          <template slot-scope="scope">
             <span v-if="scope.row.snapshot.is_special">
                   {{scope.row.amount*parseFloat(scope.row.snapshot.extra) | numFilter}} 米
             </span>
             <span v-else>{{scope.row.amount}}</span>
           </template>
        </el-table-column>
        <el-table-column label="小计">
          <template slot-scope="scope">
            <div v-if="scope.row.snapshot.is_special">{{  scope.row.snapshot.price*scope.row.amount*parseFloat(scope.row.snapshot.extra) | numFilter}}</div>
            <div v-else>{{  scope.row.snapshot.price*scope.row.amount | numFilter}}</div>
            <!-- <div>{{ handleCount(scope.row) | numFilter}}</div> -->
            <div v-if="isRefund(scope.row.refund_status)">
              已退款：
              <span style="color:red;">{{scope.row.refund_amt}}</span> 元
            </div>
            <div v-if="isRefund(scope.row.refund_status)">
              备注:
              <span>{{scope.row.refund_remark}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-row style="margin-top:20px">
        <span v-if="type == 1"
          style="font-size:14px;float:right"
        >共 1 件商品 合计：￥{{order.total_amount}}（含运费：￥{{order.freight}}）</span>
        <span v-if="type == 2"
          style="font-size:14px;float:right"
        >竞标单价格：￥{{order.total_amount}}（含运费）</span>
      </el-row>
    </div>

    <div class="card" v-if="order.ship_extra != null">
      <h3 class="title" style="margin-bottom:10px;">快递信息</h3>
      <div>配送方式：{{order.ship_extra.type=='manual'?'自填快递单':'达达'}}</div>
      <div v-if="order.ship_extra!=null">配送状态：{{orderStatus(order.ship_extra.order_status)}}</div>
      <div>订单号：{{order.no}}</div>
      <div>运费：{{order.real_freight + '元'}}</div>
      <div>收货地址：{{order.address.address}}</div>
      <div>收货人： {{order.address.contact_name}}</div>
      <div>联系电话： {{order.address.contact_phone}}</div>
      <div>期望送达时间： {{order.expect_ship_at}}</div>
    </div>
    
    <div class="card" v-if="order.ship_extra != null && order.ship_extra.order_status != 1 && order.ship_extra.order_status != 1000">
      <div>配送员id：{{order.ship_extra.dm_id}}</div>
      <div>配送员姓名：{{order.ship_extra.dm_name}}</div>
      <div>配送员手机号：{{order.ship_extra.dm_mobile}}</div>
    </div>
    
    <div class="card" v-if="order.ship_extra != null && order.ship_extra.cancel_from!=0">
      <div>订单取消操作：{{order.ship_extra.cancel_from!=1?order.ship_extra.cancel_from==2?'商家主动取消':'系统或客服取消':'达达配送员取消'}}</div>
      <div>订单取消原因：{{order.ship_extra.cancel_reason}}</div>
    </div>

    <div class="card">
      <el-row style="text-align:right; margin-top:10px;">
        <el-button type="primary" @click="showPrint">打印</el-button>
        <el-button type="danger" v-if="order.ship_extra!=null&&(order.ship_extra.order_status==1||order.ship_extra.order_status==2)" @click="clearShip">取消订单</el-button>
        <el-button type="danger" v-if="order.ship_extra!=null&&(order.ship_extra.order_status==5||order.ship_extra.order_status==7||order.ship_extra.order_status==1000)" @click="resShip">重新发单</el-button>
      </el-row>
    </div>

    <order-print ref="orderPrint"></order-print>
    <el-dialog
      title="取消订单"
      :visible.sync="showClearShip"
      width="30%"
      append-to-body
      :before-close="handleCloseClearShip">
      <el-select v-model="clearShipValue" placeholder="请选择订单取消操作">
        <el-option label="没有配送员接单" value="1"></el-option>
        <el-option label="配送员没来取货" value="2"></el-option>
        <el-option label="配送员态度太差" value="3"></el-option>
        <el-option label="顾客取消订单" value="4"></el-option>
        <el-option label="订单填写错误" value="5"></el-option>
        <el-option label="配送员让我取消此单" value="34"></el-option>
        <el-option label="配送员不愿上门取货" value="35"></el-option>
        <el-option label="我不需要配送了" value="36"></el-option>
        <el-option label="配送员以各种理由表示无法完成订单" value="37"></el-option>
        <el-option label="其他" value="10000"></el-option>
      </el-select>
      <div v-if="clearShipValue==10000" style="padding-top:10px;">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入订单取消原因"
          v-model="clearShipRemark">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseClearShip">取 消</el-button>
        <el-button type="primary" @click="handleClearShip">确 定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message"
import orderPrint from "./order_print"


export default {
  name: "detail",
  props: {
    'method': {
      default: 'showOrder'
    },
    'type':{
      default:1
    }
  },
  components: {
    orderPrint
  },
  computed: {
    showShipData() {
      if (isNull(this.order.ship_data)) return ''
      let reg = new RegExp("\n", "g");
      let str = this.order.ship_data.replace(reg, "<br>");
      return str
    }
  },
  data() {
    return {
      showDia: false,
      order: "",
      showClearShip: false,
      clearShipValue: '',
      clearShipRemark: ''
    }
  },
  filters: {
    numFilter: function (value) {
      let realVal = Number(value).toFixed(2)
      return realVal
    }
  },
  methods: {
    mapFlag(value) {
      var result = ''
      let flag = [
        { label: '待付款', value: 0 },
        { label: '订单取消', value: 1 },
        { label: '等待发货', value: 2 },
        { label: '等待发货', value: 3 },
        { label: '订单取消', value: 4 },
        { label: '待用户确认取消', value: 5 },
        { label: '订单取消', value: 6 },
        { label: '已发货', value: 7 },
        { label: '已完成', value: 8 },
      ]
      flag.forEach(element => {
        if (element.value == value)        {
          result = element.label
          return false
        }
      });

      return result
    },
    orderStatus(value){
      var result = '';
      switch(value){
        case 1: result = '待接单';break;
        case 2: result = '待取货';break;
        case 3: result = '配送中';break;
        case 4: result = '已完成';break;
        case 5: result = '已取消';break;
        case 7: result = '已过期';break;
        case 8: result = '指派单';break;
        case 9: result = '妥投异常之物品返回中';break;
        case 10: result = '妥投异常之物品返回完成';break;
        case 1000: result = '创建达达运单失败';break;
      }
      return result;
    },
    handleShow(id) {
      this.showDia = true
      this.$store.dispatch(this.method, { id: id, type:this.type}).then(res => {
        if (res.data.status == 1)
        {
          this.order = res.data.result.data
        }
        else        {
          this.order = []
        }
      })
    },
    handleClose() {
      this.showDia = false
      this.order = []
    },
    isRefund(status) {
      return status != 0
    },
    showPrint(row) {
      this.$nextTick(() => {
        this.$refs.orderPrint.handleShow(this.order)
      })
    },
    clearShip(){
      this.showClearShip = true;
    },
    handleCloseClearShip(){
      this.showClearShip = false;
      this.clearShipValue = '';
      this.clearShipRemark = '';
    },
    handleClearShip(){
      this.$store.dispatch('CancelOrderFms', { type : this.order.ship_extra.type, order_no : this.order.no, cancel_reason_id : this.clearShipValue, cancel_reason : this.clearShipRemark}).then(res => {
        if (res.data.status == 1){
          this.$message({
            type: 'success',
            message: '取消配送成功!'
          });
          this.showClearShip = false;
          this.clearShipValue = '';
          this.clearShipRemark = '';
          this.handleClose();
          this.$emit('refresh')
        }else{
          return errorMsg(this, res.data.message)
        }
      })
    },
    hanldeCount(row)
    {
       if (row.snapshot.is_special)
       {
          return row.snapshot.price*row.amount*(row.snapshot.extra)
       }
       else
       {
         return row.snapshot.price*row.amount
       }
     //(scope.row.snapshot.price*scope.row.amount)
    },
    resShip(){
      let vm = this
      let param = {
        id: this.order.id,
        type: this.order.ship_extra.type
      }

      this.$confirm('是否重新发货，发货后请注意短信接收送货订单状态。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        vm.$store.dispatch('reAddOrder', param).then(res => {
          if (res.data.status == 1)              
          {
            vm.$message({
              type: 'success',
              message: '重新发货成功!'
            });
            vm.showDia = false
            this.$emit('refresh')
          }
          else              
          {
            return errorMsg(vm, res.data.message)
          }
        })
      })
    }
  }
}
</script>

<style>
.order .card {
  padding: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
}
</style>
